<template>
  <div id="app">
<!-- 回到顶部elementui -->
<el-backtop
:right="200"
>
 <div
      style="{
        height: 100%;
        width: 100%;
        background-color: #f2f5f6;
        box-shadow: 0 0 6px rgba(0,0,0, .12);
        text-align: center;
        line-height: 40px;
        font-size:15px;
      }"
    >
    ↑up
    </div>
</el-backtop>
<!-- ##1.header区域 -->
<div class="header" v-show="!(path==='/login' || path==='/register' || path==='/adminregist')">
  <b-navbar toggleable="lg">
    
    <b-navbar-brand to="/home">
      <img src="./assets/logo.png" alt="logo" width="35px">
      助贫希望网</b-navbar-brand>

    <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>

    <b-collapse id="nav-collapse" is-nav>
      <b-navbar-nav>
        <router-link to="/index" tag="b-nav-item">首页</router-link>
        <router-link to="/passage" tag="b-nav-item">文章中心</router-link>
        <router-link to="/goodslist" tag="b-nav-item">助贫购物</router-link>
        <router-link to="/poorarea" tag="b-nav-item">贫困山区</router-link>
        <router-link to="/activity" tag="b-nav-item">活动</router-link>
      </b-navbar-nav>

      <!-- Right aligned nav items -->
      <b-navbar-nav class="ml-auto">
        <b-nav-form>
          <b-form-input size="sm" class="mr-sm-2" placeholder="请输入要搜索的内容..." v-model="search"></b-form-input>
          <b-button size="sm" class="my-2 my-sm-0" @click="toSearch">站内搜索</b-button>
        </b-nav-form>
        <router-link to="/login" id="login" v-if="!this.$store.state.flag">一键登陆</router-link>
        <b-nav-item-dropdown right v-else>
          <!-- Using 'button-content' slot -->
          <template v-slot:button-content>
            <em>user</em>
          </template>
          <router-link to="/userinfo" tag="b-dropdown-item">个人信息</router-link>
          <b-dropdown-item @click="exit">退出登陆</b-dropdown-item>
        </b-nav-item-dropdown>
      </b-navbar-nav>
    </b-collapse>
  </b-navbar>
</div>

<!-- ##3.router-view区域主体 -->
<router-view :style="'height:' + fullHeight" id="RV"></router-view>

<!-- ##4.buttom底部区域 -->
<div class="bottom">
</div>
  </div>
</template>

<script>
  export default {
      data() {
        return {
         path:'',
         fullHeight:'',
         search:'',
        }
      },
      methods: {
        exit(){
          this.$store.state.flag=false
          this.$store.state.token=""
          this.$store.state.userid=''
          window.sessionStorage.clear()
          this.$router.push('/login')
        },
        saveState() {
                sessionStorage.setItem('state', JSON.stringify(this.$store.state))
            },
        toSearch(){
              this.$router.push('/search?' + this.search)
              this.search = ''
            },
        dynamicStyle(){
          //动态修改RV样式
          var routerPath = this.$router.history.current.path
          if(routerPath=='/login' || routerPath=='/register' || routerPath=='/adminregist'){
            this.fullHeight=(document.documentElement.clientHeight  + 'px')
          }
          else if(routerPath=='/activity'){
            this.fullHeight='100%'
          }
          else{
            this.fullHeight=((document.documentElement.clientHeight-70) + 'px');
          }
        }
      },
      created() {
        window.addEventListener('unload', this.saveState)
        this.dynamicStyle()
        window.console.log(this.$router.history.current.path)
      },
      mounted(){
        this.path=this.$router.path
      },
      watch:{
        $route(to){
          this.path = to.path
          this.dynamicStyle()
        },
      }  
    }
</script>

<style scoped>
/* 设置顶部nav吸顶 */
.header{
  position: sticky;
  top: 0;
  z-index:3;
  background-color: #fff;
  box-shadow:0 1px 2px #eee;
}
/* 一键登陆的标签 */
#login{
 margin-left: 30px;
  margin-top: 10px;
  margin-bottom: 5px;
  border-radius: 12px;
  text-align: center;
  background-color: #e3f3fe;
  color: #3563d5;
  padding: 5px 15px;
  font-size: 10px;
}
</style>
